<template>
  <div>
    <article>
      <section>
        <div class="navigation">
          <!-- <img src="../../assets/left.png" alt="" /> -->
          <a href="">帮助</a>
        </div>
        <div class="headline">
          <span>手机号登录</span>
          <p>未注册的手机号登陆成功后自动注册</p>
        </div>
        <div class="phone_number" style="margin-left: 25px; position: relative">
          <input class="phonejs" v-model="Num" pe="text"
            placeholder="请输入手机号码" />
        </div>
        <div class="cut_unable" @click="pass">
          <div class="cut_button">
            <van-icon name="exchange" /> &nbsp;
            <p>密码登录</p>
          </div>
          <div class="phone_unable"><a href="">手机号无法使用</a></div>
        </div>

        <button :style="color" @click="skip_auth_code">验证并登录</button>

        <div class="agreement">
          <div class="agreement1">
            <div class="nbnb">
              <input class="check" type="checkbox" style="margin-top: 0px" v-model="b" />
              <p>我已阅读并同意</p>
            </div>
            <a style="font-size: 8px;" href="">《用户协议》</a>
            <a style="font-size: 8px;" href="">《隐私政策》</a>
            <a style="font-size: 8px;" href="">《儿童/青少年个人信息保护规则》</a>
          </div>
        </div>
        <div class="logo">
          <img src="../../assets/vx.png" alt="" />
          <img src="../../assets/icon_QQ.png" alt="" />
        </div>
      </section>
    </article>
  </div>
</template>

<script setup>
import { Number } from "../../api/home";
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { showNotify } from "vant";


const Router = useRouter()

const color = ref("background-color: rgb(246, 246, 246)")
const Num = ref("")
const b = ref(false)

const skip_auth_code = () => {
  if (b.value == true && Num.value !== "") {
    Number({
      phone: Num.value,
    })
      .then((res) => {
        console.log(res);
        console.log(Num.value);
        localStorage.setItem("phone", Num.value);
        Router.push("/Number_yanzheng")
      })
      .catch((rest) => {
        console.log(rest);
        showNotify('网络异常！')
      });
  }
}

const pass = ()=>{
  Router.push("/Password");
}

watch(Num, (newval, oldval) => {
  if (newval.length == 11) {
    color.value = "background-color: red";
  } else {
    color.value = "background-color: rgb(246, 246, 246)";
  }
})

</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

section {
  /* width: 390px; 
    height: 740px;
    border: 1px solid black;
    margin: 0 auto;
    display: flex;
    justify-content: center; */
  margin: 40px 30px !important;
}

.navigation {
  margin-top: 20px;
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row-reverse;
}

.navigation img {
  width: 20px;
  height: 20px;
}

.agreement a {
  font-size: 15px;
}

.navigation a {
  color: rgb(184, 184, 184);
}

.headline {
  width: 250px;
  height: 60px;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.headline p {
  font-size: 12px;
}

form {
  width: 330px;
  height: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

span {
  font-size: 25px;
}

.phone_number {
  width: 300px;
  height: 100px;
  display: flex;
  align-items: center;
  flex-direction: column;
  align-items: flex-start
}

.phone_number div {
  font-size: 16px;
  margin-top: 10px;
}
.phonejs {
  border: 0;
  background-color: transparent;
  outline: none;
  width: 100%;
  border-bottom: 1px solid black;
}

.number {
  width: 300px;
  height: 40px;
  border: 1px solid;
  border-top: none;
  border-left: none;
  border-right: none;
  display: flex;
  justify-content: space-between;
}

.number1 {
  width: 300px;
  height: 40px;
  border: 1px solid;
  border-top: none;
  border-left: none;
  border-right: none;
}

input[type="password"]:focus {
  outline: none;
}

input {
  width: 220px;
  height: 40px;
  margin-top: 30px;
  border: none;
}

input[type="text"]:focus {
  outline: none;
}

.cut_unable {
  width: 340px;
  height: 30px;
  display: flex;
  justify-content: space-between;
}

.cut_button {
  width: 230px;
  height: 30px;
  font-size: 7px;
  display: flex;
  align-items: center;
}

.cut_button p {
  color: rgb(18, 150, 219);
}

.cut {
  width: 20px;
  height: 20px;
}

.phone_unable {
  width: 170px;
  height: 30px;
  font-size: 7px;
  text-align: center;
}

.phone_unable a {
  line-height: 30px;
  color: rgb(18, 150, 219);
}

button {
  width: 340px;
  height: 40px;
  border: none;

  border-radius: 20px;
  margin: 0 auto;
  font-size: 20px;
  color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  justify-content: center;
}

.verify_button a {
  color: rgb(255, 255, 255);
}

.check {
  width: 15px;
  height: 15px;
  border: 1px solid brown;
  border-radius: 39px;
}

.agreement {
  width: 300px;
  height: 60px;
  font-size: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nbnb {
  width: 75px;
  height: 30px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.agreement1 {
  width: 300px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.logo {
  width: 150px;
  height: 70px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  width: 30px;
  height: 30px;
}
</style>